<style lang="scss">
.menu-operate{
 .scrollbar-wrapper {
    //height: calc(100% - 200px);
    //height:400px;
    .el-scrollbar__view {
      //height: 100%;
    }
  }
}
</style>

<template>
  <div class="app-container">

    <div style="margin-left:20px">
      <el-form ref="queryForm" label-position="left" label-width="70px" inline size="small" >
        <el-form-item label="系统名称" label-width="86px" >
          <el-select v-model="currentSystemId" filterable style="width: 300px;">
            <el-option v-for="item in systemNameList" :key="item.SystemID" :label="item.SystemName" :value="item.SystemID"/>
          </el-select>
        </el-form-item>

        <el-form-item label="" >
          <el-button :loading="okloading" type="primary" @click="handleSave">保存</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <div style="width:250px;float:left;margin:0px 5px;margin-bottom:5px">
        <el-card :body-style="{ padding: '5px' }" class="box-card">
          <div slot="header" class="clearfix">
            <span>菜单</span>
          </div>
          <div class="menu-operate">
            <el-scrollbar wrap-class="scrollbar-wrapper">
              <el-tree
                :data="dataMenuTree"

                :props="defaultProps"
                default-expand-all
                style="padding:10px;"
                highlight-current
                node-key="id"
                @current-change="menuCurrentChange"/>
            </el-scrollbar>
          </div>
        </el-card>
      </div>
      <div style="width:300px;float:left;margin:0px 5px;margin-bottom:5px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>菜单操作权限</span>
          </div>
          <el-table
            v-loading="listLoading"
            :data="list"
            :border="false"
            :stripe="true"
            size="small"
            style="width: 100%;">
            <el-table-column label="模块名称" prop="ModuleName" align="center" min-width="70px"/>

            <el-table-column label="操作名称" prop="OperateName" align="center" min-width="70px"/>
            <el-table-column label="是否默认" prop="IsDeafult" align="center" width="70px" >
              <template slot-scope="scope" >
                <el-form :model="scope.row" class="inner-table-form">
                  <el-form-item >
                    <el-switch v-model="scope.row.IsDefault" />
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>

          </el-table>
        </el-card>
      </div>
      <div style="width:250px;float:left;margin:0px 5px;margin-bottom:5px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>模块 - 操作</span>
          </div>
          <el-input
            v-model="filterOperateText"
            placeholder="输入关键字进行过滤"/>
          <el-tree
            ref="moduleOperateTree"
            :data="moduleOperateTree"
            :props="defaultProps"
            :filter-node-method="filterNode"
            show-checkbox
            node-key="treeId"
            @check-change="operateTreeCheckChange"/>
        </el-card>
      </div>

    </div>

  </div>
</template>

<script>
import { getList as getSystemNameList } from '@/api/systemName'
import { getMenuTree, getModuleOperateTree, getMenuOperateList, updateList } from '@/api/menuOperate'

import waves from '@/directive/waves' // 水波纹指令

export default {
  name: 'MenuOperate',
  directives: {
    waves
  },
  filters: {
  },
  data() {
    return {
      okloading: false,
      filterOperateText: '',
      systemNameList: [],
      currentSystemId: null,
      currentMenuId: null,
      dataMenuTree: [],
      moduleOperateTree: [],
      listLoading: false,
      menuOperateList: [],
      list: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }

    }
  },

  computed: {
  },
  watch: {
    filterOperateText(val) {
      this.$refs.moduleOperateTree.filter(val)
    }
  },
  created() {
    // this.getList()
    this.getSystemNameList()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    getSystemNameList() {
      getSystemNameList().then(response => {
        const list = response.data
        this.systemNameList = list
        if (list && list.length > 0) {
          const systemId = list[0].SystemID
          this.currentSystemId = systemId
          this.getMenuTree(systemId)
          this.getModuleOperateTree(systemId)
          this.getMenuOperateList(systemId)
        }
      })
    },
    getMenuTree(systemId) {
      getMenuTree(systemId).then(response => {
        const list = response.data
        this.dataMenuTree = list
      })
    },
    getModuleOperateTree(systemId) {
      getModuleOperateTree(systemId).then(response => {
        const list = response.data
        this.moduleOperateTree = list
      })
    },
    getMenuOperateList(systemId) {
      getMenuOperateList(systemId).then(response => {
        const list = response.data
        this.menuOperateList = list
      })
    },
    menuCurrentChange(currentData, currentNode) {
      if (currentData && currentData.id) {
        this.currentMenuId = currentData.id
        this.list = this.menuOperateList.filter(item => {
          return item.MenuID === currentData.id
        })
        const chechedKeys = []
        for (const item of this.list) {
          chechedKeys.push(item.ModuleID + '_' + item.OperateID)
        }
        this.$refs.moduleOperateTree.setCheckedKeys(chechedKeys)
      } else {
        this.currentMenuId = undefined
        this.list = this.menuOperateList.filter(item => {
          return item.MenuID === undefined
        })

        this.$refs.moduleOperateTree.setCheckedKeys([])
      }
    },
    operateTreeCheckChange(data, isChecked) {
      if (data.typeName === 'Operate') {
        if (!this.currentMenuId) return
        let parentItem = null
        for (var m of this.moduleOperateTree) {
          const childrenList = m.children
          for (const v of childrenList) {
            if (v.id === data.id) {
              parentItem = m
              break
            }
          }
        }
        if (isChecked) {
          for (const v of this.list) {
            if (v.OperateID === data.id) {
              const index = this.list.indexOf(v)
              if (index >= 0) {
                return
              }
            }
          }
          const item = {
            MenuID: this.currentMenuId,
            IsDeafult: false,
            ModuleID: parentItem.id,
            ModuleName: parentItem.label,
            OperateID: data.id,
            OperateName: data.label
          }
          this.list.push(item)
          this.menuOperateList.push(item)
        } else {
          for (const v of this.list) {
            if (v.OperateID === data.id) {
              const index = this.list.indexOf(v)
              this.list.splice(index, 1)
              break
            }
          }
          for (const v of this.menuOperateList) {
            if (v.OperateID === data.id && v.MenuID === this.currentMenuId) {
              const index = this.menuOperateList.indexOf(v)
              this.menuOperateList.splice(index, 1)
              break
            }
          }
        }
      }
    },
    handleSave() {
      const data = {
        SystemID: this.currentSystemId,
        MenuOperateList: this.menuOperateList
      }
      if (!this.currentSystemId) {
        this.$notify({
          message: '请选择系统',
          type: 'error',
          duration: 2000
        })
        return
      }
      this.okloading = true
      updateList(data).then(() => {
        this.okloading = false
        this.$notify({
          message: '保存成功',
          type: 'success',
          duration: 2000
        })
      }).catch(() => {
        this.okloading = false
      })
    },
    handleUpdate(row) {

    },

    handleDelete(row) {

    }

  }
}

</script>
